import {useSelector, useDispatch} from 'react-redux'
import {checkAllTodos, clearDoneTodos} from '../../redux/todoSlice'
import './index.css'

export default function Footer() {
  const todos = useSelector(state => state.todos)
  const dispatch = useDispatch()
  const doneCount = todos.reduce((pre, todo) => {
    return pre + (todo.done ? 1 : 0)
  }, 0)

  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" checked={todos.length === doneCount} onChange={(e) => dispatch(checkAllTodos(e.target.checked))}/>
      </label>
      <span>
        <span>已完成 {doneCount}</span> / 全部 {todos.length}
      </span>
      <button className="btn btn-danger" onClick={() => dispatch(clearDoneTodos())}>清除已完成任务</button>
    </div>
  )
}
